<template>
  <view class="container">
    <view class="navbar">
      <view 
        v-for="(tab, index) in tabs"
        :key="tab.name"
        @click="selectTab(index)"
        :class="['nav-item', { active: index === activeTabIndex }]">
        {{ tab.label }}
      </view>
    </view>
    <swiper
      class="swiper-content"
      :current="activeTabIndex"
      @change="onSwiperChange"
      :style="{ height: swiperHeight + 'px' }"
    >
      <swiper-item v-for="tab in tabs" :key="tab.name">
        <scroll-view scroll-y class="scroll-view-content" @scroll="onScroll">
          <view class="component-item">
            <Recommend v-if="tab.name === 'Recommend'" />
            <Pet v-if="tab.name === 'Pet'" />
            <PetAccessories v-if="tab.name === 'PetAccessories'" />
          </view>
        </scroll-view>
      </swiper-item>
    </swiper>
  </view>
</template>

<script>
import Recommend from './components/Recommend.vue';
import Pet from './components/Pet.vue';
import PetAccessories from './components/PetAccessories.vue';

export default {
  components: {
    Recommend,
    Pet,
    PetAccessories
  },
  data() {
    return {
      tabs: [
        { name: 'Recommend', label: '宠物用品' },
        { name: 'Pet', label: '宠物' },
        { name: 'PetAccessories', label: '其他' },
      ],
      activeTabIndex: 0,
      swiperHeight: 500 // 初始高度，可以根据实际情况调整
    };
  },
  methods: {
    selectTab(index) {
      this.activeTabIndex = index;
    },
    onSwiperChange(e) {
      this.activeTabIndex = e.detail.current;
    },
    onScroll(e) {
      // 可以在这里处理滚动事件，如果需要的话
    }
  },
  onLoad(options) {
    if (options.service) {
      const foundTab = this.tabs.findIndex(tab => tab.label === options.service);
      if (foundTab !== -1) {
        this.activeTabIndex = foundTab;
      }
    }
    
    // 获取系统信息来设置swiper的高度
    uni.getSystemInfo({
      success: (res) => {
        this.swiperHeight = res.windowHeight - uni.upx2px(100); // 假设navbar高度为100upx
      }
    });
  }
};
</script>

<style scoped>
.container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background-color: #f5f5f5;
}
.navbar {
  display: flex;
  justify-content: center;
  background-color: #fff;
  border-bottom: 1px solid #ddd;
}
.nav-item {
  padding: 10px 20px;
  cursor: pointer;
  font-size: 4.62vw;
}
.nav-item.active {
  font-weight: bold;
  border-bottom: 2px solid #ffd700;
}
.swiper-content {
  flex: 1;
}
.scroll-view-content {
  height: 100%;
}
.component-item {
  padding: 20px;
  background-color: #fff;
  margin-bottom: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  border-radius: 10px;
}
</style>